<template>
	<scroll-view-wrap>
		<template #topFixed>
			<view class="Search" style="align-items: center;display: flex;">
				<uni-search-bar v-model="searchValue" placeholder="请输入单据编码" @confirm="doSearch" style="width: 80%;" />

				<image class="dateStyle" @click="openPicker" src="@/static/img/d.png"></image>
			</view>
		</template>
		<template #content>
			<view class="imglist" v-if="imgList.length">
				<view class="main" v-if="!enlargedImage">
					<view class="grid-view">

						<view v-for="(img, index) in imgList" :key="img.FileName" class="grid-item">
							<view style="display:flex;width:96%;margin:10rpx auto;padding: 1% 5%;"
								@longpress="showDeleteConfirm(img)" @touchstart='Tstart' @touchend='Tchend'>
								<image :lazy-load="true" :src="img.values[0].imgUrl" class="thumbnail"
									@click="toggleImageSize(img.values[0].imgUrl)" ></image>
								<view @click="toBoxImgDetail(img.values[0])"
									style="margin-left:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content: center;">
									<p>单据编码-单序号：</p>
									<p>{{ img.key }}</p>
									<p>日期：</p>
									<p>{{ img.values[0].date}}</p>
								</view>
							</view>
						</view>

					</view>

					<uni-load-more :status="status" @clickLoadMore="addList" :contentText="contentText">
					</uni-load-more>
					<uni-popup ref="popup" :is-mask-click="false" @click="hideDeletePopup">
						<view class="delete-popup">
							<text>确定要删除该照片吗？</text>
							<button @click="confirmDelete">确定</button>
							<button @click="hideDeletePopup">取消</button>
						</view>
					</uni-popup>
				</view>
			</view>
			<view v-else>
				<pinapp-empty-page></pinapp-empty-page>
			</view>
			<term-picker @closeMask="pickerVisable=false" :visable.sync="pickerVisable" :defaultDate="defaultDate"
				:minYear="2019" :timeLimit="false" :deferYear="100" themeColor="#10BE9D" startText="开始时间" endText="结束时间"
				@confirm="confirmDate">
			</term-picker>
		</template>
	</scroll-view-wrap>
</template>

<script setup>
	import termPicker from '@/components/term-picker/term-picker.vue'
	import {
		computed,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import pics from '@/api/pics.js';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	import {
		onShow
	} from '@dcloudio/uni-app';
	import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue"

	var pickerVisable = ref(false);
	var currentTime = new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate();
	var defaultDate = reactive(['2024-06-01', currentTime]);
	var imgList = ref([]);

	const enlargedImage = ref(null);
	const deletingFileName = ref(null);
	const enlargedImageUrl = ref(null);
	const page = ref(1); //页码
	const limit = ref(5); //页数
	const status = ref("more"); //上拉状态
	var touchT = ref(0);
	var touchE = ref(0);
	var popup = ref(null);
	var searchValue = ref("")

	const contentText = ref({
		contentdown: "点击显示更多",
		contentrefresh: "正在加载...",
		contentnomore: "没有更多数据了"
	})

	//页面显示时
	onShow(() => {
		fetchImageList()
	});
	// 打开日期选择框
	const openPicker = () => {
		console.log(pickerVisable.value);
		pickerVisable.value = true
	}
	// 点击确定按钮，返回当前选择的值	
	const confirmDate = (date) => {
		imgList.value = [];
		const arry = date.toString().split(",")
		var data = {
			startTime: arry[0] + " 00:00:00",
			endTime: arry[1] + " 23:59:59"
		}
		searchDataunit(data)
		pickerVisable.value = false;
	};


	//检索
	const doSearch = (confirm) => {

		imgList.value = [];
		searchValue.value = confirm.value.replace(/\s/g, '')
		searchDataunit({
			page: page.value,
			limit: limit.value,
			code: searchValue.value
		})

	}


	//照片列表显示
	const fetchImageList = () => {
		imgList.value = []
		uni.showLoading({
			title: '加载中'
		});
		page.value = 1;
		status.value = "more";
		const data = {
			page: page.value,
			limit: limit.value,
			code: searchValue.value
		}
		searchDataunit(data)

	};
	//公共部分提取
	const searchDataunit = async (data = {}) => {

		status.value = "loading"
		const response = await pics.fetchImageList(data);
		console.log(response);
		uni.hideLoading();
		uni.stopPullDownRefresh();
		status.value = "more"
		if (response == void 0 || response.data == void 0 || response.data == null || response.data.length == 0) {
			uni.showToast({
				title: '数据为空请重试',
				icon: "error",
				duration: 2000
			});
			status.value = "noMore";
			return;
		}

		imgList.value = imgList.value.concat(response.data);

	}

	// 切换照片显示大小
	const toggleImageSize = (url) => {
		if (touchE.value - touchT.value < 350) {
			let urls2=[]
			urls2.push(url)
			// 预览照片
			uni.previewImage({
				urls: urls2,
				longPressActions: {
					success: function(data) {

					},
					fail: function(err) {

					}
				}
			});
		}
	};
	//点击接触时
	const Tstart = () => {
		touchT.value = new Date().getTime();
	}
	//松开时
	const Tchend = () => {
		touchE.value = new Date().getTime();
	}
	// 显示删除确认弹窗
	const showDeleteConfirm = (fileName) => {
		deletingFileName.value = fileName;
		popup.value.open("center")
	};

	// 隐藏删除确认弹窗
	const hideDeletePopup = () => {
		popup.value.close()
	};

	// 确认删除
	const confirmDelete = async () => {
		await pics.deleteImg({
			fchrExportStockNo: deletingFileName.value.values[0].fchrExportStockNo,
			ftinorder: deletingFileName.value.values[0].ftinorder
		})
		imgList.value = imgList.value.filter(img => img.key !== deletingFileName.value.key);

		hideDeletePopup();
	};

	//下拉刷新功能
	onPullDownRefresh(() => {
		imgList.value = [];
		fetchImageList();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 5000);
	});
	//上拉添加列表数据
	const addList = () => {

		page.value++;


		var data = {
			page: page.value,
			limit: limit.value,
			code: searchValue.value
		}
		searchDataunit(data);
		// pics.fetchImageList(data).then(res => {
		// 	if (res.data.length != 0) {
		// 		imgList.value = imgList.value.concat(res.data); //数据列表，列表项信息：照片名称，上传时间
		// 		status.value = "more"

		// 		for (let index in imgList.value) {
		// 			imgurl.push(imgList.value[index].values[0].imgUrl)
		// 		}
		// 	} else {
		// 		status.value = "noMore"
		// 	}
		// }).catch(err => {
		// 	console.log(err)
		// 	uni.showToast({
		// 		title: '出现错误，请联系管理员',
		// 		icon: "error",
		// 		duration: 2000
		// 	});
		// })
	}
	//跳转集装箱照片详情
	const toBoxImgDetail = (data) => {
		uni.navigateTo({
			url: "/pages/BoxImgDetail/BoxImgDetail",
			success(res) {

				res.eventChannel.emit('box', {
					data: data
				});
			}
		})
	}
</script>


<style lang="scss" scoped>
	@import url('@/static/styles/pic.css');
</style>